<template>
    <!-- <div>题目预览</div> -->
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      width="800px"
      @close="handleClose"
    >
      <!-- <span>这是一段信息</span> -->
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <span v-if="items.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="items.questionType === '2'" >【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>
        </el-col>
        <el-col :span="6">【编号】:{{ items.id }}</el-col>
        <el-col :span="6">
          <span v-if="items.difficulty === '1'">【难度】：简单</span>
          <span v-else-if="items.difficulty === '2'" >【难度】：一般</span>
          <span v-else>【难度】：困难</span> </el-col >
        <el-col :span="6">【标签】:{{ items.tags }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">【学科】:{{ items.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ items.directoryName }}</el-col>
        <el-col :span="6">【方向】:{{ items.direction }}</el-col>
      </el-row>
      <hr />

      <!-- 第二行 -->
      <el-row>
        <el-col
          >【题干】:
          <span v-html="items.question" style="color: #1111ff"></span>
          <div>
          <span v-if="items.questionType === '1'">【题型】：单选题</span>
          <span v-else-if="items.questionType === '2'" >【题型】：多选题</span>
          <span v-else>【题型】：简答题</span>选项（以下选中的选项为正确答案）
          </div>
          <!-- 单选 -->

           <el-radio-group
          v-model="radio"
          v-if="items.questionType === '1'"
          @change="change"
        >
          <el-row
            v-for="(item, index) in items.options"
            :key="index"
            style="margin: 10px 0px"
          >
            <el-radio :label="item.isRight">{{ item.title }}</el-radio>
          </el-row>
        </el-radio-group>

          <!-- 多选 -->
           <div v-if="items.questionType === '2'">
          <el-row
          style="margin: 10px 0px"
          >
            <el-checkbox
             v-for="(item, index) in options"
            :key="index"
              :checked="item.isRight=== true"
              :disabled="item.isRight === 0"
              @change="testChange(item)"

            >
              {{ item.title }}
            </el-checkbox>
          </el-row>
        </div>
        </el-col>
      </el-row>
      <hr />

      <!-- 第三行 -->
      <el-row>
        <el-col>
          <div>
            【参考答案】:<el-button
              type="danger"
              size="small"
              style="margin-left: 10px"
              @click="flag = !flag"
              >视频答案预览</el-button
            >
          </div>
          <div><video :src="items.videoURL" controls v-if="flag"></video></div>
        </el-col>
      </el-row>
      <hr />

      <!-- 第四行 -->
      <el-row>
        <el-col>
          <a
            target="_blank"
            href="https://element.eleme.cn/#/zh-CN/component/installation"
            >【答案解析】:<span
              v-text="items.answer && items.answer.replace(/<[^>]+>/g, '')"
            ></span>
          </a>
        </el-col>
      </el-row>
      <hr />

      <!-- 第五行 -->
      <el-row>
        <a
          target="_blank"
          href="https://element.eleme.cn/#/zh-CN/component/installation"
        >
          <el-col>【题目备注】:{{ items.remarks }}</el-col>
        </a>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="handleClose">关闭</el-button>
        </el-row>
      </span>
    </el-dialog>
  </template>

<script>
// 精选题库列表

import { detail } from '@/api/hmmm/questions'
// 题型，难度
// import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
    // tableData: {
    //   type: Array
    // }
  },
  data () {
    return {
      items: {},
      flag: false,
      radio: 1
    }
  },
  // created () {
  //   this.detailList()
  // },
  methods: {
    // 关闭
    handleClose () {
      // console.log(1)
      this.$emit('handleClose')
      // this.items = {}
    },
    // 精选题库列表渲染
    async detailList (id) {
      console.log(id)
      const { data } = await detail({ id })
      // console.log(data)
      this.items = data
    },
    // 单选框
    change () {
      this.radio = 1
    },
    //  多选框的change事件
    testChange (item) {
      if (item.isRight) {
        console.log(item.isRight)
      } else {
        item.isRight = true
      }
    }

  },
  computed: {
    options () {
      // 先判断是不是多选题
      if (this.items.questionType === '2') {
        if (!this.items.options) {
          return // 如果没有题目选项停止后续操作
        }
        // 遍历传递过来的题目选项 如果isRight===1 代表该选项是被选中的选项
        this.items.options.forEach((element) => {
          if (element.isRight === 1) {
            // 将这一项的isRight改为true 多选框就会默认选择
            element.isRight = true
          }
        })
        // 修改完成之后
        return this.items.options
      } else {
        // 如果不是单选题 原路返回传递过来的题目项
        return this.items.options
      }
    }
  }
}
</script>

  <style scoped lang="scss">
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  </style>
